<template>
  <div class="Bar">
           <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <b>视频新闻</b>
        <el-breadcrumb separator=""> 
          <el-breadcrumb-item :to="{ path: '/list/video' }" style="background: none;"> More&gt;&gt;</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
      </el-breadcrumb>     
      </div>
    </template>
     <el-carousel indicator-position="outside">
    <el-carousel-item v-for="el in videoArr" :key="el.id">
     <router-link :to="'/detailVid/'+el.id">
     <img :src="el.src" alt="" style="width:100%">
     </router-link>
    </el-carousel-item>
  </el-carousel>
 
  </el-card >
    <el-card class="box-card" style="margin-top: 30px;">
    <template #header>
      <div class="card-header">
        <b>图片新闻</b>
        <el-breadcrumb separator=""> 
          <el-breadcrumb-item :to="{ path: '/list/images' }" style="background: none;"> More&gt;&gt;</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
      </el-breadcrumb>     
      </div>
    </template>
     <el-carousel indicator-position="outside">
    <el-carousel-item v-for="el in imgArr" :key="el.id">
     <router-link :to="'/detailImg/'+el.id">
     <img :src="el.src" alt="" style="width:100%;height: 100%;">
     </router-link>
    </el-carousel-item>
  </el-carousel>
 
  </el-card>
  <el-card class="box-card newest" style="margin-top: 30px;">
    <template #header>
      <div class="card-header">
        <b>最新新闻</b>
        <el-breadcrumb separator=""> 
          <el-breadcrumb-item :to="{ path: '/list/newest' }" style="background: none;"> More&gt;&gt;</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
      </el-breadcrumb>     
      </div>
    </template>
    <ul>
        <li v-for="el in newsetArr" :key="el.id">
            <router-link :to="'/detail/newest/'+el.id">
                <section>
                    <span v-text="el.day"></span>
                    <span v-text="el.monyear"></span>
                </section>
                <h4 v-text="el.title"></h4>
                <div><el-icon><View /></el-icon>800</div>
            </router-link>
        </li>
    </ul>
 
  </el-card>
  <el-card class="box-card newest" style="margin-top: 30px;">
    <template #header>
      <div class="card-header">
        <b>最热新闻</b>
        <el-breadcrumb separator=""> 
          <el-breadcrumb-item :to="{ path: '/list/newhot' }" style="background: none;"> More&gt;&gt;</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
      </el-breadcrumb>     
      </div>
    </template>
    <ul>
        <li v-for="el in newhotArr" :key="el.id">
            <router-link :to="'/detail/newhot/'+el.id">
                <section>
                    <span v-text="el.day"></span>
                    <span v-text="el.monyear"></span>
                </section>
                <h4 v-text="el.title"></h4>
                <div><el-icon><View /></el-icon>800</div>
            </router-link>
        </li>
    </ul>
 
  </el-card>
  </div>
</template>

<script>
export default {
  name: 'BarCom',
  data(){
    return{
        videoArr:[],
        imgArr:[],
        newsetArr:[],
        newhotArr:[]
        
    }
  }
  ,
  mounted(){
   const arr = this.$store.state.extraData;
  
    this.videoArr=arr[3].map(el=>{
        return{id:el.id,src:this.$store.state.URL+'video/'+el.src}
    })
    this.imgArr=arr[2].map(el=>{
        return{id:el.id,src:this.$store.state.URL+'photoes/'+el.src}
    })
     this.newsetArr=arr[0].map(el=>{
        let d=new Date(el.updatedAt);
        return{id:el.id,title:el.title,day:d.getDate(),monyear:d.getFullYear()+'-'+(d.getMonth()+1)}
    })
      this.newhotArr=arr[1].map(el=>{
        let d=new Date(el.updatedAt);
        return{id:el.id,title:el.title,day:d.getDate(),monyear:d.getFullYear()+'-'+(d.getMonth()+1)}
    })
  }
 
}
</script>


<style scoped lang="less">
.Bar{
     .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
  .newest{
    ul{
        padding:0 0 0 20px;
        list-style: none;
        
        li{
            a,a:visited{
                display: flex;
                text-decoration: none;
                section{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 35px;
                    margin-right: 10px;
                    color: rgb(247, 242, 242);
                    background-color: rgb(26, 137, 234);
                    margin-top: 21px;
                    font-size: 13px;
                    font-weight: 300;
                    border-radius: 5px;
                    span{
                       &:first-child{
                        font-size: 14px;
                        font-weight: 400;
                       }
                        text-align: center;
                        
                        
                    }
                }
                h4{
                    flex: 5;
                    font-weight: normal;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    word-break: break-all;
                    overflow: hidden;
                    font-size: 14px;
                    color: black;
                    &:hover{
                           color: rgb(71, 89, 141);
                    }
                }
                div{
                    flex: 1;
                    margin-top: 20px;
                    margin-left: 5px;
                    
                    font-size: 14px;
                    color: rgb(71, 89, 141);
                    .el-icon{
                       margin-right: 2px;
                    }
                }
            }
        }
    }
  }
    
 
}
</style>
